<!--用户管理页-->
<template>
<div style="background-color: #fff;height: 6vh;padding: 10px 20px;">
  <span style="font-size: 16px;line-height: 60px;">用户管理</span>
  <el-button type="primary"style="float:right;margin-top: 10px" @click="beforeAddUser">添加用户</el-button>
</div>
  <!-- 用户搜索卡片-->
  <el-card style="height: 70px;margin: 10px;">
    <el-form :inline="true">
      <el-form-item label="用户搜索" style="width: 270px;">
        <el-input placeholder="请输入用户名"
                  v-model="searchUserForm.username" @keydown.enter="loadUser"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户状态" style="width: 270px;">
       <el-select placeholder="请选择用户状态"
                  v-model="searchUserForm.status" @change="loadUser">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="0"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadUser">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!--用户列表卡片-->
  <el-card style="margin: 10px;">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" align="center" windth="80"></el-table-column>
      <el-table-column label="用户名" prop="username" align="center" ></el-table-column>
      <el-table-column label="手机号" prop="iphone" align="center"></el-table-column>
      <el-table-column label="加入时间" prop="createTime" align="center" ></el-table-column>
      <el-table-column label="用户状态">
        <template #default="scope">
          <el-switch active-value="1" inactive-value="0"
                     v-model="scope.row.status" @change="changeStatus(scope.row.id,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link
                     :disabled="scope.row.level==40" @click="resetPassword(scope.row.id)">密码重置</el-button>
          <el-button type="primary" link
                     :disabled="scope.row.level==40" @click="editUser(scope.row.id)">编辑</el-button>
          <el-button type="primary" link
                     :disabled="scope.row.level==40" @click="delUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 新增员工弹窗-->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width:1000px;padding: 40px"
      :before-close="handleclose">
    <el-form label-position="top">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"
                      :disabled="saveUserForm.id!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="邮箱" >
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="saveUserForm.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="职级">
            <el-select placeholder="请选择" v-model="saveUserForm.level" @change="loadLeader">
              <el-option v-for="item in levelOption" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="直属领导">
            <el-select placeholder="请选择" v-model="saveUserForm.parentId">
              <el-option v-for="item in leaderOptions" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.gender">
              <el-radio label="男" value="1" border style="margin: 0;">男</el-radio>>
              <el-radio label="女" value="0" border>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态">
            <el-radio-group v-model="saveUserForm.status">
              <el-radio label="启用" value="1" border style="margin: 0; ">启用</el-radio>>
              <el-radio label="禁用" value="0" border>禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleclose">取消</el-button>
      <el-button type="primary" @click="saveUser">保存</el-button>
    </template>
  </el-dialog>

</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
const userArr = ref([]);

const searchUserForm = ref({username: '', status: ''});


const loadUser = () => {
  let data = qs.stringify(searchUserForm.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/user/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      userArr.value = response.data.data;
    }else{
      ElMessage.error(response.data.message);
    }
  })
};

onMounted(()=>{
  loadUser();
});
//定义重置搜索方法
const resetSearch = () => {
  //清空用户输入的搜索条件
  searchUserForm.value = {username: '', status: ''};
  //重新加载所有的用户数据
  loadUser();
};

const dialogVisible = ref(false);
const levelOption = ref([
  {label:'员工',value:'10'},
  {label:'经理',value:'20'},
  {label:'总监',value:'30'},
  {label:'总裁',value:'40'}
]);
const leaderOptions = ref([
  // {label:'CC',value:'301'},
  // {label:'DD',value:'302'}
]);

const saveUserForm = ref({
  username:'',
  phone:'',
  email:'',
  age:'',
  level:'',
  parentId:'',
  gender:'',
  status:''
});

const saveUser = () => {
  console.log(saveUserForm.value);
  let data = qs.stringify(saveUserForm.value);
  console.log(data);
  //给后端发送请求
  axios.post(BASE_URL+'/v1/user/save',data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success("保存成功！");
      saveUserForm.value={};//清空弹窗表单数据
      dialogVisible.value=false;//关闭弹窗
      loadUser();//重新加载用户表格数据
    }else if(response.data.code == 3001){//如果校验失败
      ElMessage.error(response.data.message);//显示具体的错误信息
    }else{//其他异常显示异常描述信息
      ElMessage.error(response.data.message);
    }
  })

}

const handleclose = () => {
  if(confirm('确定关闭弹窗吗？')){
    saveUserForm.value={};
    dialogVisible.value=false;
  }

}

//定义加载直属领导的方式
const loadLeader = () => {
  /*
  * 问题：之前已经选择了具体的直属领导,切换别的职级后,原先选择中的直属领导无法显示名字,是ID值
  * 原因:根据新职级加载出来的可选领导数组中,不包含之前职级对应的领导,所以无法知晓该领导的名字
  * 解决:切换新职级时,需要先将之前遗留的历史数据清楚掉*/
  leaderOptions.value = [];//清空可选领导数组
  saveUserForm.value.parentId = '';//清空具体选择的哪个领导
  //先获取当前选择的职级,+10得到可选领导职级
  let level = parseInt(saveUserForm.value.level)+10;
  console.log(level);
  axios.get(BASE_URL+'/v1/user/select?level='+level).then((response)=>{
    if(response.data.code == 2000){
      leaderOptions.value = response.data.data;
    }else{
      ElMessage.error(response.data.message);
    }
  })
}

//定义变量用来控制弹窗标题
const dialogTitle = ref('新增员工');
//定义点击新增员工按钮时调用的方法
const beforeAddUser = ()=>{
  dialogTitle.value = '新增员工';
  dialogVisible.value = true;
}
//定义编辑员工的方法
const editUser = (id)=>{
  dialogTitle.value = '编辑员工';
  dialogVisible.value = true;
  axios.get(BASE_URL+'/v1/user/select?id='+id).then((response)=>{
    if(response.data.code == 2000){
      saveUserForm.value = response.data.data[0];
      console.log("********************");
      console.log(saveUserForm.value);
      let level = parseInt(saveUserForm.value.level)+10;

      axios.get(BASE_URL+'/v1/user/select?level='+level).then((response)=>{
        if(response.data.code == 2000){
          leaderOptions.value = response.data.data;
        }else{
          ElMessage.error(response.data.message);
        }
      })
    }else{
      ElMessage.error(response.data.message);
    }
  })

}

const resetPassword = (userId)=>{
  axios.post(BASE_URL+'/v1/user/update/password/'+userId)
      .then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success('重置密码成功!');
    }else{
      ElMessage.error(response.data.message);
    }
  })
}

//定义修改员工状态的方法
const changeStatus = (userId,status)=>{
  axios.post(BASE_URL+'/v1/user/update/status/'+userId+'/'+status)
      .then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success('修改状态成功!');
        }else{
          ElMessage.error(response.data.message);
        }
      })
}

const delUser = (userId)=>{
  if(confirm('确定删除该员工吗？')){
    axios.post(BASE_URL+'/v1/user/delete/'+userId)
        .then((response)=>{
          if(response.data.code == 2000){
            ElMessage.success('删除员工成功!');
            loadUser();
          }else{
            ElMessage.error(response.data.message);
          }
        })
  }
}
</script>


<style scoped>

</style>